<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="机构名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['customerName']" placeholder="请输入客户名称" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="联 系 人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['leadername']" placeholder="请输入客户领导姓名"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['leaderphone']" placeholder="请输入客户领导电话号码"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="第二手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['secondphone']" placeholder="请输入第二手机号码"></a-input>
                        </a-form-item>
                    </a-col>
                    <!--                    <a-col :span="24">-->
                    <!--                        <a-form-item label="客户详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
                    <!--                            <a-input v-decorator="['address']" placeholder="请输入客户详细地址"></a-input>-->
                    <!--                        </a-form-item>-->
                    <!--                    </a-col>-->
                    <a-col :span="24">
                        <a-form-item label="合同开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-date-picker v-decorator="['contractStart']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="合同结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-date-picker v-decorator="['contractEnd']"/>
                        </a-form-item>
                    </a-col>

                    <a-col :span="24">
                        <a-form-item label="合同作废" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select placeholder="合同作废" v-decorator="['cancellation']">
                                <a-select-option :value="0">合同正常</a-select-option>
                                <a-select-option :value="1">合同作废</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
                        <a-button @click="submitForm">提 交</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
    </a-spin>
</template>

<script>

    import { getAction, httpAction } from '@/api/manage'
    import pick from 'lodash.pick'

    export default {
        name: 'HcContractForm',
        components: {},
        props: {
            //流程表单data
            formData: {
                type: Object,
                default: () => {
                },
                required: false
            },
            //表单模式：true流程表单 false普通表单
            formBpm: {
                type: Boolean,
                default: false,
                required: false
            },
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                form: this.$form.createForm(this),
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                confirmLoading: false,
                validatorRules: {},
                url: {
                    add: '/hc/hcContract/add',
                    edit: '/hc/hcContract/edit',
                    queryById: '/hc/hcContract/queryById'
                }
            }
        },
        computed: {
            formDisabled() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return false
                    }
                    return true
                }
                return this.disabled
            },
            showFlowSubmitButton() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return true
                    }
                }
                return false
            }
        },
        created() {
            //如果是流程中表单，则需要加载流程表单data
            this.showFlowData()
        },
        methods: {
            add() {
                this.edit({})
            },
            edit(record) {
                this.form.resetFields()
                this.model = Object.assign({}, record)
                this.visible = true
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model, 'leadername', 'city', 'secondphone', 'latitude', 'leaderphone', 'province', 'longitude', 'area', 'address', 'contractEnd', 'customerType', 'customerNumber', 'contractStart', 'settlementInterval', 'areaCode', 'confirmByUser', 'confirmTime', 'isConfirm', 'customerName', 'settlementType', 'companysId', 'userId', 'cancellation'))
                })
            },
            //渲染流程表单数据
            showFlowData() {
                if (this.formBpm === true) {
                    let params = { id: this.formData.dataId }
                    getAction(this.url.queryById, params).then((res) => {
                        if (res.success) {
                            this.edit(res.result)
                        }
                    })
                }
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.form.validateFields((err, values) => {
                    if (!err) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }

                        values.contractStart = new Date(values.contractStart).FormatDate();
                        values.contractEnd = new Date(values.contractEnd).FormatDate();
                        let formData = Object.assign(this.model, values)
                        console.log('表单提交数据', formData)
                        httpAction(httpurl, formData, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },

        }
    }
</script>
